<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <canvas id="c1" width="600" height="400" style="width: 600px; height: 400px;"></canvas>
  <script>
    // 画布
    const canvas = document.getElementById('c1')
    // 画笔
    const ctx = canvas.getContext('2d')
    // 绘制圆弧 x y 半径 开始角度  结束角度 顺时针_true/逆时针_false
    //     ctx.arc(300,200,150,0,Math.PI * 2);

    // 脸
    ctx.beginPath()
    ctx.arc(300,200,150,0,Math.PI * 2);
    // 嘴
    ctx.moveTo(400,200)
    ctx.arc(300,200, 100, 0,Math.PI)
    // 眼睛
    // 左
    ctx.moveTo(275,150)
    ctx.arc(250,150, 25, 0,Math.PI * 2)
    // 右
    ctx.moveTo(375,150)
    ctx.arc(350,150, 25, 0,Math.PI * 2)
    ctx.stroke()
    ctx.closePath()
  </script>
</body>
</html>